<template>
    <NUpload :file-list="props.fileList" :max="props.max" :accept="props.accept" :multiple="true" :on-change="onFileChanged"
        :custom-request="onFileUpload" :list-type="props.listType">
        <template v-if="props.listType === 'text'">
            <NButton type="primary">
                上传文件
            </NButton>
        </template>
        <template v-if="props.listType === 'image-card'">
        </template>
    </NUpload>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, defineProps, defineEmits, type PropType } from 'vue'
import {
    NSpace,
    NForm,
    NInput,
    NFormItem,
    NButton,
    NScrollbar,
    NSelect,
    useMessage,
    NModal,
    NCheckboxGroup,
    NCheckbox,
    NIcon,
    NUpload,
    type UploadCustomRequestOptions,
    type UploadFileInfo
} from 'naive-ui';
import { sendRequest } from '@/utils/api'

type UploadListType = 'text' | 'image' | 'image-card'

interface UploadProps {
    fileList: UploadFileInfo[];
    needUpload: boolean;
    controlled: boolean;
    accept: string;
    max: number;
    listType: UploadListType;
}

const props = defineProps({
    fileList: { required: false, type: Object as PropType<UploadFileInfo[]>, default: () => [] },
    needUpload: { required: false, type: Boolean, default: true }, // 是否需要上传
    controlled: { required: false, type: Boolean, default: false },
    accept: { required: false, type: String, default: null }, // 上传支持类型
    max: { required: false, type: Number, default: 1 }, // 最大上传数量
    listType: { required: false, type: Object as PropType<UploadListType>, default: "text" }, // 最大上传数量
})
// const props2 = defineProps(['modelValue'])
const emits = defineEmits(['update:fileList'])
// const emits = defineEmits(['update:fileList'])
const message = useMessage()

const fileList = ref<any>([]) // 文件列表（未上传）
const valueList = ref<any>([]) // 组件value列表（已经上传完成）
/** 监听文件改变 */
const onFileChanged = (e: any) => {
    // 使用file判断
    const { file, fileList } = e
    if (props.needUpload) {
        if (file.status === 'pending') {
            onFileUpload({ file: file.file, key: file.id })
        } else if (file.status === 'removed' && file.url) {
            const newList = valueList.value
            const index = newList.findIndex((v: any) => {
                return v.id === file.id && v.name === file.name
            })
            newList.splice(index, 1)
            emits('update:fileList', newList)
        }
    } else {
        fileList.value = fileList
    }
}
/** 上传前处理文件 */
const handleFileNeedUpload = async () => {
    console.log(fileList.value)
    fileList.value.forEach((item: any) => {
        let isHave = valueList.value.find((v: any) => {
            return v.key === item.key
        })
        if (!isHave) {
            onFileUpload({ file: item.file, key: item.key })
        }
    })
}
/** 上传文件 */
const onFileUpload = async (e: any) => {
    const { file, key } = e
    const fileData = new FormData()
    fileData.append('file', file as File)
    const [error, res] = await sendRequest<any>({
        module: 'upload',
        api: 'uploadFile',
        override: {
            data: fileData
        }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error('上传失败')
    const { fileId, name, url } = res.data
    const newList = [
        ...props.fileList,
        {
            id: fileId,
            name,
            url,
            key,
            status: 'finished'
        }
    ]
    console.log(valueList.value)
    emits('update:fileList', newList)
    // returnFileList()
}
// const returnFileList = () => {
//     emits('getFileList', valueList.value)
// }

onMounted(() => {
    
})

</script>
<style scoped lang="scss"></style>